$(function () {
  //获取数据并渲染
  function getdata() {
    $.ajax({
      url: '/my/article/cates',
      type: 'get',
      data: {},
      success: function (res) {
        // console.log(res, 666)
        var html = template('tpl', res)
        // console.log(html);
        $('tbody').html(html)
      }
    })
  }
  getdata()
  //添加的模板
  var str = `  <form class="layui-form" lay-filter="formText" id="form">
  <div class="layui-form-item">
    <input type="hidden" value="" name="id" />
    <label class="layui-form-label">分类名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" required lay-verify="required|name" placeholder="请输入标题" autocomplete="off" class="layui-input" />
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">分类别名</label>
    <div class="layui-input-block">
      <input type="text" name="alias" required lay-verify="required|alias" placeholder="请输入标题" autocomplete="off" class="layui-input" />
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo" id="xiugai" type="submit">确认添加</button>
      <button type="reset" class="layui-btn layui-btn-primary" id="chongzhi">重置</button>
    </div>
  </div>
</form>`

  //编辑的模板
  var str2 = `  <form class="layui-form" lay-filter="formText" id="formedit">
<div class="layui-form-item">
  <input type="text" name="Id" />
  <label class="layui-form-label">分类名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required id="Fenlei" lay-verify="required|name" placeholder="请输入标题" autocomplete="off" class="layui-input" />
  </div>
</div>

<div class="layui-form-item">
  <label class="layui-form-label">分类别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required id="Benming" lay-verify="required|alias" placeholder="请输入标题" autocomplete="off" class="layui-input" />
  </div>
</div>

<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo" id="genggai" type="submit">确认修改</button>
  </div>
</div>
</form>`

  var layer = layui.layer
  var indexadd = null
  $('.addbtn').on('click', function () {
    indexadd = layer.open({
      type: 1, //校验时对话框不满足也不关闭
      title: '添加文章分类',
      skin: 'demo_class',
      content: str,
      btn: []
    })
  })

  //校验分类名
  var form = layui.form
  form.verify({
    name: [/^[\S]{5,10}$/, '昵称必须6到12位，且不能出现空格']
  })

  //添加数据
  $('body').on('submit', '#form', function (e) {
    e.preventDefault()
    $.ajax({
      url: '/my/article/addcates',
      type: 'post',
      data: $('#form').serialize(),
      success: function (res) {
        // console.log(res, 000)
        getdata()
        //添加成功后隐藏弹框
        layer.close(indexadd)
      }
    })
  })

  //删除数据
  var indexdel = null
  $('body').on('click', '#del', function () {
    var id = $(this).attr('index')
    // console.log(id,123213);
    //点击删除显示弹框是否要删除
    indexdel = layer.confirm('是否删除？', { icon: 3, title: '提示' }, function (index) {
      $.ajax({
        url: '/my/article/deletecate/' + id,
        type: 'get',
        data: {},
        success: function (res) {
          getdata()
          layer.close(indexdel)
        }
      })
    })
  })

  //编辑
  var indexedit
  $('body').on('click', '#edit', function () {
    var id = $(this).attr('index')
    $.ajax({
      url: '/my/article/cates/' + id,
      type: 'get',
      data: {},
      success: function (res) {
        console.log(res, 11111)
        indexedit = layer.open({
          type: 1, //校验时对话框不满足也不关闭
          title: '添加文章分类',
          skin: 'demo_class',
          content: str2,
          btn: []
        })
        $('body').find('input[name=Id]').val(id)
        console.log(res)
        $('input[name=name]').val(res.data.name)
        $('input[name=alias]').val(res.data.alias)
      }
    })
  })

  $('body').on('submit', '#formedit', function (e) {
    e.preventDefault()
    $.ajax({
      url: '/my/article/updatecate',
      type: 'post',
      data: $('#formedit').serialize(),
      success: function (res) {
        console.log(res, 666666666)
        getdata()
        layer.close(indexedit)
      }
    })
  })
})
